import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import { Upload, message, Button, Icon, Radio, Input, Col } from 'antd';

import logo from '../../../../../asset/images/logo@mini.png';

import styles from './index.module.less';

const props = {
  name: 'file',
  action: '//jsonplaceholder.typicode.com/posts/',
  headers: {
    authorization: 'authorization-text',
  },
  onChange(info) {
    if (info.file.status !== 'uploading') {
      console.log(info.file, info.fileList);
    }
    if (info.file.status === 'done') {
      message.success(`${info.file.name} file uploaded successfully`);
    } else if (info.file.status === 'error') {
      message.error(`${info.file.name} file upload failed.`);
    }
  },
};

export default class PersonalMessage extends Component {
  state = {
    value: 1,
    value2: 1,
  }
  onChange = e => {
    console.log('radio checked', e.target.value);
    this.setState({
      value: e.target.value,
    });
  }
  onChange2 = e => {
    console.log('radio checked', e.target.value);
    this.setState({
      value2: e.target.value,
    });
  }
  render() {
    return (
      <div className={styles.personalContent}>
        <div style={{ color: '#1e88e5' }}>基本信息</div>
        <div className={styles.logoContent}>
          <div className={styles.pullLeft + ' ' + styles.logoTitle}>头像</div>
          <div className={styles.pullLeft + ' ' + styles.logoBox}>
            <div className={styles.logoImg}>
              <img src={logo} alt=""/>
            </div>
            <div className={styles.logoBoxtitle}>暂无头像</div>
          </div>
          <div className={styles.pullLeft + ' ' + styles.logoTitle2}>
            <div>未认证</div>
            <div className={styles.logoBtn}>
              <Upload {...props}>
                <Button type="primary">点击上传</Button>
              </Upload>
            </div>
            <div>上传图片要求：请使用真实头像，展示风格支持JPG, JPEG, GIF, PNG风格，支持2M以内的图片。 </div>
          </div>
        </div>
        <div className={styles.clearfix}></div>
        <div className={styles.personalForm}>
          <div className={styles.d1}>
            <span className={styles.s1}>昵称</span>
            <input type="text" placeholder='请输入昵称'/>
          </div>
          <div className={styles.d1}>
            <span className={styles.s1}>账号</span>
            <input type="text" placeholder='请输入账号'/>
          </div>
          <div className={styles.d1}>
            <span className={styles.s1}>性别</span>
            <Radio.Group onChange={this.onChange} value={this.state.value}>
              <Radio value={1}>先生</Radio>
              <Radio value={2}>女士</Radio>
            </Radio.Group>
          </div>
          <div className={styles.d1}>
            <span className={styles.s1}>身份</span>
            <Radio.Group onChange={this.onChange2} value={this.state.value2}>
              <Radio value={1}>企业单位</Radio>
              <Radio value={2}>事业单位</Radio>
              <Radio value={3}>个体经营</Radio>
              <Radio value={4}>个人（无营业执照请选择个人）</Radio>
            </Radio.Group>
          </div>
          <div className={styles.d1}>
            <span className={styles.phoneS1}>固定电话</span>
            <input type="text" placeholder='86' className={styles.phoneInput1}/>
            &nbsp; - &nbsp;
            <input type="text" placeholder='002' className={styles.phoneInput2}/>
            &nbsp; - &nbsp;
            <input type="text" placeholder='8888888' className={styles.phoneInput3}/>
          </div>
          <div className={styles.d1}>
            <span className={styles.s1}>传真</span>
            <input type="text" placeholder='86' className={styles.phoneInput1}/>
            &nbsp; - &nbsp;
            <input type="text" placeholder='002' className={styles.phoneInput2}/>
            &nbsp; - &nbsp;
            <input type="text" placeholder='8888888' className={styles.phoneInput3}/>
          </div>
          <div className={styles.d1}>
            <span className={styles.address}>联系地址</span>
            <select name="" id="" className={styles.sel1}>
              <option value="">中国</option>
            </select>
            <select name="" id="" className={styles.sel2}>
              <option value="">浙江省</option>
            </select>
            <select name="" id="" className={styles.sel3}>
              <option value="">杭州市</option>
            </select>
            <select name="" id="" className={styles.sel4}>
              <option value="">拱墅区</option>
            </select>
            <div className={styles.addressDetail}><input type="text" placeholder='请输入详细街道地址'/></div>
          </div>
          <div className={styles.d1}>
            <span className={styles.s1}>邮编</span>
            <input type="text" placeholder='请输入邮编'/>
          </div>
          <div className={styles.statement}>
            <Radio>
            我声明，此页面所填写内容均真实有效，特别是经营地址为最新可联系到的地址，
            同时可以作为行政机关和司法机关送达<br/>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;法律文件的地址。如果上述地址信息有误，
            愿意承担由此带来的平台处罚（处理细则）、行政监管和司法诉讼风险。
            </Radio>
          </div>
          <div className={styles.submitBtn}>
            <Button type="primary">确认提交</Button>
          </div>
        </div>
      </div>
    );
  }
}

